<template>
	<view>
		<!-- 顶部固定部分 -->
		<view class="top-warp">
			<view class="search-section">
				<view class="uni-form-item uni-column">
					<!-- #ifdef H5 -->
					<uni-icons type="arrowleft" size="18" class="back-icon" @click="back"></uni-icons>
					<!-- #endif -->
					<input class="uni-input search-input" confirm-type="search" placeholder="请输入搜索关键字" focus="true" :value="keyword" @input="getKeyword" @confirm="startSearch" />
					<uni-icons type="search" size="18" class="search-icon" @click="startSearch()"></uni-icons>
				</view>
			</view>
		</view>
		
		<view class="list-section" v-if="searchLoading == false">
			<view v-if="knowledgeCount > 0">
				<KnowledgeList title="课程列表组件" type="knowledge_list" :params="knowledgeListParams" :config="config" />
			</view>
			<view v-if="columnCount > 0">
				<ColumnList title="专栏列表组件" type="column_list" :params="columnListParams" :config="config" />
			</view>
			<view v-if="liveCount >0">
				<LiveList title="直播课堂列表组件" type="live_list" :params="liveListParams" :config="config" />
			</view>
			<view v-if="offlineCount > 0">
				<OfflineList title="线下课列表组件" type="offline_list" :params="offlineListParams" :config="config" />
			</view>
			<view v-if="materialCount > 0">
				<MaterialList title="资料下载列表组件" type="material_list" :params="materialListParams" :config="config" />
			</view>
			<view v-if="exampaperCount > 0">
				<ExamPaperList title="试卷列表组件" type="exampaper_list" :params="exampaperListParams" :config="config" />
			</view>
			<view v-if="teacherCount > 0">
				<TeacherList title="老师列表组件" type="teacher_list" :params="teacherListParams" :config="config" />
			</view>
			<view v-if="articleCount > 0">
				<ArticleList title="文章列表组件" type="article_list" :params="articleListParams" :config="config" />
			</view>
		</view>
		
		<!--搜索历史 容器-->
		<view  v-else class="history-list-section">
			<view class="title">搜索历史</view>
			<view class="lists">
				<view class="item" v-for="(item, index) in history" :key="index" @click="clickSearch(item.keyword)">
					{{item.keyword}}
				</view>
			</view>
			
			<view class="title">热门搜索</view>
			<view class="lists">
				<view class="item" v-for="(item, index) in hot" :key="index" @click="clickSearch(item)">
					{{item}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import ColumnList from '@/common/diys/ColumnList/ColumnList.vue' //专栏列表组件
	import KnowledgeList from '@/common/diys/KnowledgeList/KnowledgeList.vue' //课程列表组件
	import LiveList from '@/common/diys/LiveList/LiveList.vue' //直播课堂列表组件
	import MaterialList from '@/common/diys/MaterialList/MaterialList.vue' //资料下载列表组件
	import OfflineList from '@/common/diys/OfflineList/OfflineList.vue' //线下课列表组件
	import ExamPaperList from '@/common/diys/ExamPaperList/ExamPaperList.vue' //试卷列表组件
	import ArticleList from '@/common/diys/ArticleList/ArticleList.vue' //文章列表组件
	import TeacherList from '@/common/diys/TeacherList/TeacherList.vue' //老师列表组件
	
	export default {
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		components: {
			ColumnList,
			KnowledgeList,
			LiveList,
			MaterialList,
			OfflineList,
			ExamPaperList,
			ArticleList,
			TeacherList,
		},
		data() {
			return {
				searchLoading : true,
				urlParams: {}, //url传递过来的参数
				keyword : '', //搜索关键字
				
				history : [], //搜索历史列表
				hot: [], //搜索推荐关键字
				knowledgeCount : 0,
				knowledgeListParams: {}, //点播课列表
				columnCount : 0,
				columnListParams: {}, //专栏列表
				liveCount : 0,
				liveListParams: {}, //直播列表
				offlineCount: 0,
				offlineListParams: {}, //线下课列表
				materialCount : 0,
				materialListParams: {}, //资料列表
				exampaperCount: 0,
				exampaperListParams: {}, // 试卷列表
				articleCount: 0,
				articleListParams: {}, // 文章列表
				teacherCount: 0,
				teacherListParams: {}, // 老师列表
			}
		},
		onLoad(option) {
			//获取url参数
			this.urlParams = option
		},
		created() {
			this.getHistoryList()
			this.getHotList()
		},
		computed: {
			...mapState(['config'])
		},
		methods: {
			
			/**
			 * 返回
			 */
			back() {
				let pages = getCurrentPages() // 获取栈实例
				let prevPage = pages[pages.length - 2]
				if(prevPage !== undefined){
					uni.navigateBack()
				}else{
					let url = '../index/index'
					uni.redirectTo({
						url: url
					});
				}
			},
			
			/**
			 * 获取关键字
			 * @param {Object} e
			 */
			getKeyword(e){
				console.log(e)
				this.keyword = e.detail.value
				if(this.keyword == ""){
					this.searchLoading = true
				}
			},
			
			/**
			 * 搜索推荐关键字列表
			 */
			getHotList() {
				let _this = this
				let data = {}
					data.action = 'hot'
					data.m = 'muu_classroom'
				//获取数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/search'
					//#endif
					//#ifdef H5
					url = 'entry/site/search'
					//#endif
				this.util.request({
					url : url,
					data : data,
					success(res) {
						if (res.data.code == 200) {
							_this.hot = res.data.data
							console.log(_this.hot)
						}
					}
				})
			},
			
			/**
			 * 搜索历史列表
			 */
			getHistoryList() {
				let _this = this
				let data = {}
					data.action = 'history'
					data.m = 'muu_classroom'
				//获取数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/search'
					//#endif
					//#ifdef H5
					url = 'entry/site/search'
					//#endif
				this.util.request({
					url : url,
					data : data,
					success(res) {
						if (res.data.code == 200) {
							_this.history = res.data.data
							console.log(_this.history)
						}
					}
				})
			},
			
			/**
			 * 历史记录搜索
			 * @param {Object} e
			 */
			clickSearch(keyword) {
				this.keyword = keyword
				this.startSearch()
			},
			
			/**
			 * 开始搜索
			 */
			startSearch(){
				console.log('startSearch')
				console.log(this.keyword)
				this.searchLoading = true
				Promise.all([
					this.addKeyword(this.keyword),
					this.getKnowledgeList(),
					this.getColumnList(),
					this.getLiveList(),
					this.getOfflineList(),
					this.getMaterialList(),
					this.getExamPaperList(),
					this.getTeacherList(),
					this.getArticleList(),
				]).then(res => {
					//加载完成
					this.searchLoading = false
				})
			},
			
			/**
			 * 写入历史搜索记录
			 * @param {Object} keyword
			 */
			addKeyword(keyword){
				let that = this
				
				let data = {}
					data.action = 'add'
					data.m = 'muu_classroom'
					data.keyword = this.keyword
					
				//获取数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/search'
					//#endif
					//#ifdef H5
					url = 'entry/site/search'
					//#endif
				
				return new Promise((resolve, reject) => {
					this.util.request({
						url : url,
						data : data,
						success(res) {
							if (res.data.code == 200) {
								
							}
							resolve(res.data)
						},
						fail() {
							reject(res)
						}
					})
				})
			},
			
			/**
			 * 获取点播课列表
			 */
			getKnowledgeList: function(){
				let that = this
				
				let data = {}
					data.action = 'lists'
					data.m = 'muu_classroom'
					data.page = 1
					data.rows = 4
					data.keyword = this.keyword
					
				//获取数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/knowledge'
					//#endif
					//#ifdef H5
					url = 'entry/site/knowledge'
					//#endif
					
				return new Promise((resolve, reject) => {
					this.util.request({
						url : url,
						data : data,
						success: function (res) {
							if (res.data.code == 200) {
								that.knowledgeListParams.title = '课程'
								that.knowledgeListParams.rows = res.data.data.per_page
								that.knowledgeListParams.category_id = 0
								that.knowledgeListParams.keyword = that.keyword
								that.knowledgeListParams.list = res.data.data.data
								that.knowledgeListParams.style = 0
								console.log(that.knowledgeListParams)
								that.knowledgeCount = res.data.data.total
							}
							resolve(res.data)
						}
					})
				})
			},
			
			/**
			 * 获取专栏列表
			 */
			getColumnList: function(){
				let that = this
				let data = {}
					data.action = 'lists'
					data.m = 'muu_classroom'
					data.page = 1
					data.rows = 4
					data.keyword = this.keyword
				//获取数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/column'
					//#endif
					//#ifdef H5
					url = 'entry/site/column'
					//#endif
					
				return new Promise((resolve, reject) => {
					this.util.request({
						url : url,
						data : data,
						success: function (res) {
							if (res.data.code == 200) {
								that.columnListParams.title = '专栏'
								that.columnListParams.rows = res.data.data.per_page
								that.columnListParams.category_id = 0
								that.columnListParams.keyword = that.keyword
								that.columnListParams.list = res.data.data.data
								that.columnListParams.style = 0
								that.columnCount = res.data.data.total
							}
							resolve(res.data)
						}
					})
				})
			},
			
			/**
			 * 获取直播列表
			 */
			getLiveList: function(){
				let that = this
				let data = {}
					data.action = 'lists'
					
					data.page = 1
					data.rows = 4
					data.keyword = this.keyword
				//获取数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/livecourse'
					data.m = 'muu_classroom'
					//#endif
					//#ifdef H5
					url = 'entry/site/live'
					data.m = 'muu_classroom_plugin_livecourse'
					//#endif
				return new Promise((resolve, reject) => {
					this.util.request({
						url : url,
						data : data,
						success: function (res) {
							if (res.data.code == 200) {
								that.liveListParams.title = '直播'
								that.liveListParams.rows = res.data.data.per_page
								that.liveListParams.category_id = 0
								that.liveListParams.keyword = that.keyword
								that.liveListParams.list = res.data.data.data
								that.liveListParams.style = 0
								that.liveCount = res.data.data.total
							}
							resolve(res.data)
						}
					})
				})
				
			},
			
			/**
			 * 获取线下课列表
			 */
			getOfflineList: function(){
				let that = this
				let data = {}
					data.action = 'lists'
					data.page = 1
					data.rows = 4
					data.keyword = this.keyword
				//获取数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/offline'
					data.m = 'muu_classroom'
					//#endif
					//#ifdef H5
					url = 'entry/site/offline'
					data.m = 'muu_classroom_plugin_offline'
					//#endif
					
				return new Promise((resolve, reject) => {
					this.util.request({
						url : url,
						data : data,
						success: function (res) {
							if (res.data.code == 200) {
								that.offlineListParams.title = '线下课'
								that.offlineListParams.rows = res.data.data.per_page
								that.offlineListParams.category_id = 0
								that.offlineListParams.keyword = that.keyword
								that.offlineListParams.list = res.data.data.data
								that.offlineListParams.style = 0
								that.offlineCount = res.data.data.total
							}
							resolve(res.data)
						}
					})
				})	
			},
			
			/**
			 * 获取资料下载列表
			 */
			getMaterialList: function(){
				let that = this
				let data = {}
					data.action = 'lists'
					data.page = 1
					data.rows = 4
					data.keyword = this.keyword
				//获取首页数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/material'
					data.m = 'muu_classroom'
					//#endif
					//#ifdef H5
					url = 'entry/site/material'
					data.m = 'muu_classroom_plugin_material'
					//#endif
				return new Promise((resolve, reject) => {
					this.util.request({
						url : url,
						data : data,
						success: function (res) {
							if (res.data.code == 200) {
								that.materialListParams.title = '资料'
								that.materialListParams.rows = res.data.data.per_page
								that.materialListParams.category_id = 0
								that.materialListParams.keyword = that.keyword
								that.materialListParams.list = res.data.data.data
								that.materialListParams.style = 0
								that.materialCount = res.data.data.total
							}
							resolve(res.data)
						}
					})
				})
			},
			
			/**
			 * 获取试卷列表
			 */
			getExamPaperList: function(){
				let that = this
				let data = {}
					data.action = 'lists'
					data.page = 1
					data.rows = 4
					data.keyword = this.keyword
				//获取数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/exam',
					data.m = 'muu_classroom'
					//#endif
					//#ifdef H5
					url = 'entry/site/paper'
					data.m = 'muu_classroom_plugin_exam'
					//#endif
					
				return new Promise((resolve, reject) => {
					this.util.request({
						url : url,
						data : data,
						success: function (res) {
							if (res.data.code == 200) {
								that.exampaperListParams.title = '试卷'
								that.exampaperListParams.rows = res.data.data.per_page
								that.exampaperListParams.category_id = 0
								that.exampaperListParams.keyword = that.keyword
								that.exampaperListParams.list = res.data.data.data
								that.exampaperListParams.style = 0
								that.exampaperCount = res.data.data.total
							}
							resolve(res.data)
						}
					})
				})
			},
			
			/**
			 * 获取老师列表
			 */
			getTeacherList: function(){
				let that = this
				let data = {}
					data.action = 'lists'
					data.m = 'muu_classroom'
					data.page = 1
					data.rows = 4
					data.keyword = this.keyword
				//获取数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/teacher'
					//#endif
					//#ifdef H5
					url = 'entry/site/teacher'
					//#endif
					
				return new Promise((resolve, reject) => {
					this.util.request({
						url : url,
						data : data,
						success: function (res) {
							if (res.data.code == 200) {
								that.teacherListParams.title = '老师'
								that.teacherListParams.rows = res.data.data.per_page
								that.teacherListParams.keyword = that.keyword
								that.teacherListParams.list = res.data.data.data
								that.teacherListParams.style = 0
								that.teacherCount = res.data.data.total
							}
							resolve(res.data)
						}
					})
				})
			},
			
			/**
			 * 文章列表
			 */
			getArticleList: function(){
				let that = this
				let data = {}
					data.action = 'lists'
					data.page = 1
					data.rows = 4
					data.keyword = this.keyword
				//获取数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/article',
					data.m = 'muu_classroom'
					//#endif
					//#ifdef H5
					url = 'entry/site/article'
					data.m = 'muu_classroom_plugin_article'
					//#endif
					
				return new Promise((resolve, reject) => {
					this.util.request({
						url : url,
						data : data,
						success: function (res) {
							if (res.data.code == 200) {
								that.articleListParams.title = '文章'
								that.articleListParams.rows = res.data.data.per_page
								that.articleListParams.category_id = 0
								that.articleListParams.keyword = that.keyword
								that.articleListParams.list = res.data.data.data
								that.articleListParams.style = 0
								that.articleCount = res.data.data.total
							}
							resolve(res.data)
						}
					})
				})
			},
		}
	}
</script>

<style lang="scss">
	.search-section {
		position: relative;
		padding: 10rpx 20rpx;
		border-bottom: 2rpx solid #f8f8f8;
		/* #ifdef MP */
		.search-input {
			background-color: #fff;
			padding: 12rpx;
			font-size: 28rpx;
		}
		/* #endif */
		/* #ifdef H5 */
		.search-input {
			background-color: #fff;
			padding: 12rpx;
			font-size: 28rpx;
			padding-left: 60rpx;
		}
		/* #endif */
		.back-icon {
			position: absolute;
			left: 20rpx;
			top: 22rpx;
			color: #000;
		}
		.search-icon {
			position: absolute;
			right: 36rpx;
			top: 22rpx;
			color: #000;
			z-index: 2;
		}
	}
	
	.history-list-section {
		padding: 20rpx;
		.title {
			font-size: 28rpx;
			color: #999;
			
		}
		.lists {
			margin-top: 20rpx;
			margin-bottom: 20rpx;
			.item {
				display: inline-block;
				padding: 10rpx 16rpx;
				margin: 10rpx;
				background-color: #f8f8f8;
				border-radius: 10rpx;
				font-size: 28rpx;
			}
		}
	}
</style>
